<template>
  <div id="lativHome">
    <!-- 搜索框 -->
    <van-search placeholder="搜索商品" shape="round" @click="$router.push('/lativ/search')" />
    <!-- 顶部导航栏 -->
    <van-tabs color="#A00000" @change="changItem">
      <van-tab v-for="(item,i) in cateGroy" :key="i" :name="item._id" :title="item.title"></van-tab>
    </van-tabs>
    <nav>
      <ul>
        <li @click="defaultSort">综合</li>
        <li @click="defaultSort">销量</li>
        <li @click="defaultSort">新品</li>
        <li @click="changeSort">
          价格
          <van-icon name="arrow-up" v-show="sort==1" />
          <van-icon name="arrow-down" v-show="sort==2" />
        </li>
      </ul>
    </nav>

    <div class="goodslist">
      <div class="list" v-for="(item,i) in cate" :key="i">
        <img src="/static/logo.png" :data_src="item.pic"  />
        <p v-html="item.title"></p>
        <p>
          ￥{{item.price}}
          <span>
            <van-icon name="cart-o" size="20" @click="goCart(i)"></van-icon>
          </span>
        </p>
      </div>
    </div>


    <van-sku v-model="show" :sku="sku" :goods="goods" />
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      sort: 0,
      listIndex:0,
      cateGroy: [],
      goodsList: [],
      cId:0,
      show:false,
      sku: {
        tree: [
          {
            k: "颜色",
            k_s: "c1",
            v: [
              { id: 1, name: "红色" },
              { id: 2, name: "白色" },
              { id: 3, name: "骚粉色" }
            ]
          },
          {
            k: "尺码",
            k_s: "s1",
            v: [
              { id: 8, name: "L" },
              { id: 9, name: "XL" }
            ]
          }
        ],
        list: [
          {
            id: 1000,
            c1: 1,
            s1: 8,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 1,
            s1: 9,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 2,
            s1: 8,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 2,
            s1: 9,
            price: 100,
            stock_num: 100
          },
          {
            id: 1000,
            c1: 3,
            s1: 8,
            price: 100,
            stock_num: 100
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227 // 商品总库存
      },
      goods: {
        picture: ""
      }
    };
  },
  computed: {
    cate() {
      let data = this.goodsList;
        //排序
      data.sort((a, b) => {
        if (this.sort == 1) {
          return a.price - b.price;
        } else {
          return b.price - a.price;
        }
      });
        //切换菜单

        if(this.cId == 0 ){
            return data
        }

        data = data.filter(item=>{
            return item.cid == this.cId
        })

      return data;
    }
  },
  methods: {
    // 加入购物车
    goCart(i){
        this.show = true;
        this.listIndex = i;
        this.goods.picture = this.goodsList[this.listIndex].pic;
        this.sku.price = this.goodsList[this.listIndex].price;
    },
    //懒加载
    lazyload(){
      let html = document.documentElement || document.body;

      let imgs = document.querySelectorAll('img');

      for(let i=0;i<imgs.length;i++){
        if(html.clientHeight+html.scrollTop > imgs[i].offsetHeight){
          // this.$toast.loading("努力加载中，请稍后");
          setTimeout(function(){
            imgs[i].src = imgs[i].getAttribute("data_src")
          },300);
        }
      }
    },
    //获取数据
    getList() {
      this.$axios({
        url: "/static/lativ/fenlei.json"
      }).then(res => {
        // console.log(res.result[0]);
        // this.cId = res.result[0]._id;
        // console.log(this.cId)
        this.cateGroy = res.result;
      });
      this.$axios({
        url: "/static/lativ/list.json"
      }).then(res => {
        // console.log(res.result)
        this.goodsList = res.result;
        this.$nextTick(()=>{
          this.lazyload()
        })
      });
    },
    //排序
    defaultSort() {
      this.sort = 0;
    },
    changeSort() {
      if (this.sort == 0 || this.sort == 1) {
        this.sort = 2;
      } else {
        this.sort = 1;
      }
    },
    //分类切换
    changItem(name,title){
        this.cId = name
        this.lazyload()
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getList();
    document.addEventListener("scroll",this.lazyload)
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#lativHome {
  background: rgb(243, 243, 243);
  nav {
    width: 100%;
    padding-top: 0.2rem;
    ul {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      background: white;
      padding-left: 0.2rem;
      li {
        font-size: 0.3rem;
        width: 15%;
        height: 0.7rem;
        line-height: 0.7rem;
      }
    }
  }

  .goodslist {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .list {
      background: white;
      width: 4.55rem;
      margin: 0.3rem 0rem 0rem 0.3rem;
      box-sizing: border-box;
      img {
        width: 100%;
      }
      p {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: gray;
        padding: 0.2rem;
        box-sizing: border-box;
      }
      p:nth-of-type(2) {
        color: red;
        font-size: 0.3rem;
        font-weight: bolder;
        span {
          color: gray;
          float: right;
        }
      }
    }
  }
}
</style>